<template>
<div class="home">
  <el-row :gutter="20" class="homenav" v-loading="loading1">
    <el-col :span="6">
      <div class="grid-content homegroup">
        <i class="iconfont icon-xinzeng homeicon"></i>
        <h3>今日新增</h3>
        <p>{{todayadd}}</p>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content homegroup">
        <i class="iconfont icon-daiban1 homeicon"></i>
        <h3>今日待办</h3>
        <p>{{todayno}}</p>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content homegroup">
        <i class="iconfont icon-18banjie homeicon"></i>
        <h3>今日办结</h3>
        <p>{{todaydo}}</p>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="grid-content homegroup">
        <i class="iconfont icon-chaoshi homeicon"></i>
        <h3>今日超时</h3>
        <p>{{todayout}}</p>
      </div>
    </el-col>
  </el-row>
  <el-row class="homeslider" v-loading="loading2">
    <el-col :span="24">
      <div class="grid-content">
        <template>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="date"
              label="综合统计">
            </el-table-column>
            <el-table-column
              prop="fuwu"
              label="服务次数">
            </el-table-column>
            <el-table-column
              prop="great"
              label="好评">
            </el-table-column>
            <el-table-column
              prop="good"
              label="中评">
            </el-table-column>
            <el-table-column
              prop="bad"
              label="差评">
            </el-table-column>
          </el-table>
        </template>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="12">
      <ul class="companysay">
        <div>通知公告
          <router-link to="noticelist"><i class="el-icon-more"></i></router-link>
        </div>
        <li v-for="l in notelist" @click="looknotice()">{{l.title}}<span>{{l.date}}</span></li>
      </ul>
    </el-col>
    <el-col :span="12">
      <ul class="companysay">
        <div>供热动态
          <router-link to="newslist"><i class="el-icon-more"></i></router-link>
        </div>
        <li v-for="l in notelist" @click="looknews()">{{l.title}}<span>{{l.date}}</span></li>
      </ul>
    </el-col>
  </el-row>
</div>
</template>
<script>
export default {
  name: 'home',
  data() {
    return {
      loading1:true,
      loading2:true,
      tableData: [{
        date: '今日',
        fuwu: '1',
        great: '123',
        good: '11',
        bad: '0'
      }, {
        date: '本月',
        fuwu: '1',
        great: '123',
        good: '11',
        bad: '0'
      }, {
        date: '本年',
        fuwu: '1',
        great: '123',
        good: '11',
        bad: '0'
      }],
      notelist: [{
        title: '热付通平台为了惠及百姓，协同供热企业联手',
        date: '2017-05-18'
      }, {
        title: '热付通平台为了惠及百姓，协同供热企业联手',
        date: '2017-05-18'
      }, {
        title: '热付通平台为了惠及百姓，协同供热企业联手',
        date: '2017-05-18'
      }, {
        title: '热付通平台为了惠及百姓，协同供热企业联手',
        date: '2017-05-18'
      }, {
        title: '热付通平台为了惠及百姓，协同供热企业联手',
        date: '2017-05-18'
      }],
      company: '沈阳惠天热电股份有限公司',
      todayadd: 0, //今日新增
      todayno: 0, //今日待办
      todaydo: 0, //今日办结
      todayout: 0 //今日超时
    }
  },
  methods: {
    looknews() {
      this.$router.push('/newsinfo')
    },
    looknotice() {
      this.$router.push('/noticeinfo')
    },
    getTodayInfo() { //今日信息
      var data = {
        method: 'TotalTodayRecord',
        origin: 'WarmAppealService',
        company: this.company
      }
      const _this = this;
      this.post(this.jholdUrl, data, function(res) {
        for (var i = 0; i < res.Data.length; i++) {
          if (res.Data[i].Key == 'JRXZ') { //今日新增
            _this.todayadd = res.Data[i].Value
          } else if (res.Data[i].Key == 'JRDB') { //今日待办
            _this.todayno = res.Data[i].Value
          } else if (res.Data[i].Key == 'JRBJ') { //今日办结
            _this.todaydo = res.Data[i].Value
          } else if (res.Data[i].Key == 'JRCS') { //今日超时
            _this.todayout = res.Data[i].Value
          }
        }

        _this.loading1 = false

      })
    },
    getStatistics(){ //综合统计
      var data = {
        method:'Web_ZHTJ',
        origin:'WarmAppealService',
        company:this.company
      }
      const _this = this;
      this.post(this.jholdUrl, data, function(res) {
        _this.loading2 = false
      })
    }
  },
  created() {
    this.getTodayInfo()
    this.getStatistics()
  }
}
</script>

<style media="screen">
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.homegroup {
  background: #fff;
  box-shadow: 0px 0px 10px 0px #ccc;
  height: 100px;
  position: relative;
}

.homenav {
  margin-top: 20px;
  overflow: hidden;
  padding-top: 10px;
  padding-bottom: 10px
}

.homegroup h3 {
  font-size: 18px;
  font-weight: normal;
  margin-left: 40%;
  margin-top: 24px;
  float: left;
  width: 50%;
  display: block;
  text-align: center;
  color: #48576a;
}

.homegroup p {
  font-size: 18px;
  color: #FF9900;
  margin-left: 40%;
  float: left;
  margin-top: 10px;
  text-align: center;
  width: 50%;
  display: block;
}

.homeicon {
  position: absolute;
  left: 60px;
  font-size: 40px;
  top: 28px;
  color: #20A0FF
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.homeslider {
  width: 100%;
  overflow: hidden;
}

.companysay {
  width: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dfe6ec;
}

.companysay div {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  text-indent: 24px;
  background: #eef1f6;
  position: relative;
}

.companysay li {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  text-indent: 24px;
  border-top: 1px solid #dfe6ec;
  cursor: pointer;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.companysay li:hover {
  color: #20A0FF
}

.companysay li span {
  float: right;
  margin-right: 16px
}

.companysay .el-icon-more {
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -7px;
  cursor: pointer;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.companysay .el-icon-more:hover {
  color: #20A0FF
}
</style>
